---
title: "Quick Start"
description: "Build a $framework Table with AG Grid, the best free, fast and flexible $framework Data Grid. Features Sorting, Filtering, Pagination, Custom Components, and more."
---

{% if isFramework("vue") %}
AG Grid is a high-performance {% getFrameworkCapitalised() %} Data Grid library for building {% getFrameworkCapitalised() %} Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit [Community vs. Enterprise](./community-vs-enterprise/) to learn more.
{% /if %}

{% if isFramework("react") %}
{% videoSection id="6hxbPqziELk" title="React Data Grid quick start video tutorial" playlist="PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW" showHeader=true %}
AG Grid is a high-performance {% getFrameworkCapitalised() %} Data Grid library for building [React Tables](/react-table/) with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit [Community vs. Enterprise](./community-vs-enterprise/) to learn more.
{% /videoSection %}
{% /if %}

{% if isFramework("angular") %}
{% videoSection id="X_Ip_jGDtho" title="Angular Data Grid quick start video tutorial" playlist="PLsZlhayVgqNw6VHFn4j6FcJM5vLACsf0x" showHeader=true %}
AG Grid is a high-performance {% getFrameworkCapitalised() %} Data Grid library for building {% getFrameworkCapitalised() %} Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit [Community vs. Enterprise](./community-vs-enterprise/) to learn more.
{% /videoSection %}
{% /if %}

{% if isFramework("javascript") %}
{% videoSection id="Ww7-LC6rU6U" title="JavaScript Data Grid quick start video tutorial" playlist="PLsZlhayVgqNxijfRQxg5Mc6W4MzZHQ9MK" showHeader=true %}
AG Grid is a high-performance {% getFrameworkCapitalised() %} Data Grid library for building {% getFrameworkCapitalised() %} Tables with unbeatable performance and hundreds of features. Available in Community and Enterprise editions. Visit [Community vs. Enterprise](./community-vs-enterprise/) to learn more.
{% /videoSection %}
{% /if %}

{% if isFramework("react") %}
## Create a React Data Grid
{% /if %}

{% if isFramework("angular") %}
## Create an Angular Data Grid
{% /if %}

{% if isFramework("javascript") %}
## Create a JavaScript Data Grid
{% /if %}

{% if isFramework("vue") %}
## Create a Vue Data Grid
{% /if %}

Add AG Grid to your application in 60 seconds:

{% if isFramework("react", "angular", "vue") %}

{% numberHeading number="1" title="NPM Install" level="h3" %}

{% if isFramework("react") %}
<!-- Install React -->

 Install the `ag-grid-react` package, which also installs `ag-grid-community`:

```bash
npm install ag-grid-react
```

{% /if %}

{% if isFramework("angular") %}
<!-- Install Angular -->

 Install the `ag-grid-angular` package, which also installs `ag-grid-community`:

```bash
npm install ag-grid-angular
```

{% /if %}

{% if isFramework("vue") %}
<!-- Install Vue3 -->

 Install the `ag-grid-vue3` package, which also installs `ag-grid-community`:

```bash
npm install ag-grid-vue3
```

{% /if %}

{% /numberHeading %}
    
{% /if %}


{% if isFramework("javascript") %}
{% metaTag tags=["createGrid"] /%}
{% numberHeading number="1" title="Provide a Container" level="h3" %}
<!-- Create JavaScript -->

 Load the AG Grid library and create a container div. The div should have a height because the Data Grid will fill the size of the parent container:

```html
<html lang="en">
    <head>
        <!-- Includes all JS & CSS for the JavaScript Data Grid -->
        <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
    </head>
    <body>
        <!-- Your Data Grid container -->
        <div id="myGrid" style="height: 500px"></div>
    </body>
</html>
```

{% note %}
If you're using TypeScript you need to import and register the modules you want to use. See the [NPM Installation](./installation/#npm-installation) docs for more information. 
{% /note %}


{% /numberHeading %}
{% /if %}


{% if isFramework("javascript") %}
{% numberHeading number="2" title="Instantiating the JavaScript Data Grid" level="h3" %}


Create the Data Grid inside of your container div using `createGrid`.

```js
// Grid Options: Contains all of the Data Grid configurations
const gridOptions = {};

// Your Javascript code to create the Data Grid
const myGridElement = document.querySelector('#myGrid');
agGrid.createGrid(myGridElement, gridOptions);
```

{% /numberHeading %}
{% /if %}


{% if isFramework("javascript") %}
{% numberHeading number="3" title="Define Rows and Columns" level="h3" %}

```js
// Grid Options: Contains all of the Data Grid configurations
const gridOptions = {
    // Row Data: The data to be displayed.
    rowData: [
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: false },
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    ],
    // Column Definitions: Defines the columns to be displayed.
    columnDefs: [
        { field: "make" },
        { field: "model" },
        { field: "price" },
        { field: "electric" }
    ]
};
```
{% /numberHeading %}
{% /if %}

{% if isFramework("react") %}
{% metaTag tags=["aggridreact"] /%}
<!-- Create React -->

{% numberHeading number="2" title="Register Modules" level="h3" %}


 Register the `AllCommunityModule` to access all Community features:

```js
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; 

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
```

{% note %}
To minimize bundle size, only register the modules you want to use. See the [Modules](./modules/) docs for more information.
{% /note %}
{% /numberHeading %}


{% numberHeading number="3" title="Import the React Data Grid" level="h3" %}

```js
import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
```
{% /numberHeading %}


{% numberHeading number="4" title="Define Rows and Columns" level="h3" %}

```js
const GridExample = () => {
    // Row Data: The data to be displayed.
    const [rowData, setRowData] = useState([
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: false },
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    ]);

    // Column Definitions: Defines the columns to be displayed.
    const [colDefs, setColDefs] = useState([
        { field: "make" },
        { field: "model" },
        { field: "price" },
        { field: "electric" }
    ]);

    // ...
}
```

{% /numberHeading %}

{% numberHeading number="5" title="React Data Grid Component" level="h3" %}

Return the `AgGridReact` component, wrapped in a parent container `div` with a fixed height. Set Rows and Columns as `AgGridReact` component attributes:

```jsx
return (
    // Data Grid will fill the size of the parent container
    <div style={{ height: 500 }}>
        <AgGridReact
            rowData={rowData}
            columnDefs={colDefs}
        />
    </div>
)
```
{% /numberHeading %}
{% /if %}

{% if isFramework("angular") %}
{% numberHeading number="2" title="Register Modules" level="h3" %}

Register the `AllCommunityModule` to access all Community features:

```js
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; 

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
```

{% note %}
To minimize bundle size, only register the modules you want to use. See the [Modules](./modules/) page for more information.
{% /note %}
{% /numberHeading %}
{% /if %}



{% if isFramework("angular") %}
{% numberHeading number="3" title="Import the Angular Data Grid" level="h3" %}


```js
import { AgGridAngular } from 'ag-grid-angular'; // Angular Data Grid Component
import type { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
```
{% /numberHeading %}
{% /if %}


{% if isFramework("angular") %}
{% numberHeading number="4" title="Define Rows and Columns" level="h3" %}

```jsx
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [AgGridAngular], // Add Angular Data Grid Component
    styleUrls: ['./app.component.css'],
    template: ``
})

export class AppComponent {
    // Row Data: The data to be displayed.
    rowData = [
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: false },
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    ];

    // Column Definitions: Defines the columns to be displayed.
    colDefs: ColDef[] = [
        { field: "make" },
        { field: "model" },
        { field: "price" },
        { field: "electric" }
    ];
}
```
{% /numberHeading %}
{% /if %}


{% if isFramework("angular") %}
{% numberHeading number="5" title="Angular Data Grid Component" level="h3" %}


Set Rows and Columns as `ag-grid-angular` component attributes:

```js
template:
`
    <!-- The AG Grid component -->
    <ag-grid-angular
        [rowData]="rowData"
        [columnDefs]="colDefs" />
`
```
{% /numberHeading %}
{% /if %}


{% if isFramework("vue") %}
{% numberHeading number="2" title="Register Modules" level="h3" %}
Register the `AllCommunityModule` to access all Community features:

```js
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; 

// Register all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
```

{% note %}
To minimize bundle size, only register the modules you want to use. See the [Modules](./modules/) page for more information.
{% /note %}

{% /numberHeading %}
{% /if %}



{% if isFramework("vue") %}
{% numberHeading number="3" title="Import the Vue Data Grid" level="h3" %}

```html
<script>
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component

export default {
    name: "App",
    components: {
        AgGridVue, // Add Vue Data Grid component
    },
    setup() {},
};
</script>
```

{% /numberHeading %}
{% /if %}


{% if isFramework("vue") %}
{% numberHeading number="4" title="Define Rows and Columns" level="h3" %}

```js
setup() {
    // Row Data: The data to be displayed.
    const rowData = ref([
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: false },
        { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    ]);

    // Column Definitions: Defines the columns to be displayed.
    const colDefs = ref([
        { field: "make" },
        { field: "model" },
        { field: "price" },
        { field: "electric" }
    ]);

    return {
        rowData,
        colDefs,
    };
},
```

{% /numberHeading %}
{% /if %}


{% if isFramework("vue") %}
{% numberHeading number="5" title="Vue Data Grid Component" level="h3" %}

Set Rows and Columns as `ag-grid-vue` component attributes. Styling is applied through the class and style attributes.

```html
<template>
    <!-- The AG Grid component -->
    <ag-grid-vue
        :rowData="rowData"
        :columnDefs="colDefs"
        style="height: 500px"
    >
    </ag-grid-vue>
</template>
```
{% /numberHeading %}
{% /if %}


{% if isFramework("angular") %}
{% numberHeading number="6" title="Example Angular Data Grid" level="h3" %}
Below is a live example of the application running. Click `</> Code` to see the code.
{% gridExampleRunner title="Quick Start Example" name="quick-start-example"  exampleHeight=303 /%}
{% note %}
To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
{% /note %}
{% /numberHeading %}
{% /if %}



{% if isFramework("react") %}
{% numberHeading number="6" title="Example React Data Grid" level="h3" %}
Below is a live example of the application running. Click `</> Code` to see the code.
{% gridExampleRunner title="Quick Start Example" name="quick-start-example"  exampleHeight=303 /%}
{% note %}
To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
{% /note %}
{% /numberHeading %}
{% /if %}

{% if isFramework("vue") %}
{% numberHeading number="6" title="Example Vue Data Grid" level="h3" %}
Below is a live example of the application running. Click `</> Code` to see the code.
{% gridExampleRunner title="Quick Start Example" name="quick-start-example"  exampleHeight=303 /%}
{% note %}
To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
{% /note %}
{% /numberHeading %}
{% /if %}


{% if isFramework("javascript") %}
{% numberHeading number="4" title="Example JavaScript Data Grid" level="h3" %}
Below is a live example of the application running. Click `</> Code` to see the code.
{% gridExampleRunner title="Quick Start Example" name="quick-start-example"  exampleHeight=303 /%}
{% note %}
To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.
{% /note %}
{% /numberHeading %}
{% /if %}



## Next Steps

{% if isFramework("angular") %}
Now that you have a basic Angular Data Grid running, choose one of the following options to continue your learning journey:
{% /if %}

{% if isFramework("react") %}
Now that you have a basic React Data Grid running, choose one of the following options to continue your learning journey:
{% /if %}

{% if isFramework("vue") %}
Now that you have a basic Vue Data Grid running, choose one of the following options to continue your learning journey:
{% /if %}

{% if isFramework("javascript") %}
Now that you have a basic JavaScript Data Grid running, choose one of the following options to continue your learning journey:
{% /if %}


{% gettingStarted library="grid"/%}

